<template>
  <view class="main">
    <u-navbar title="请假详情" :autoBack="true"> </u-navbar>
    <u-gap height="50" bgColor="#F8FAFB"></u-gap>
      <view class="container_warp">

                <view class="item">请假人：<text style="color: #ccc;">{{detail.userName}}</text>  </view>
                <view class="item">审核状态：
                <text style="margin-top: 10px;color: #C4AD8C;white-space:nowrap;" v-if="detail.approvalStatus=='1'">退回</text>
                <text style="margin-top: 10px;color: #C4AD8C;white-space:nowrap;" v-if="detail.approvalStatus=='2'">待审核</text>
                <text style="margin-top: 10px;color: #C4AD8C;white-space:nowrap;" v-if="detail.approvalStatus=='3'">审核通过</text>
                <text style="margin-top: 10px;color: #C4AD8C;white-space:nowrap;" v-if="detail.approvalStatus=='4'">审核未通过</text>
                </view>
                <view class="item">联系方式：<text style="color: #ccc;">{{detail.userPhone}}</text>  </view>

                <view class="item">请假类型：<text style="color: #ccc;">{{findVal(detail.reasonId)}}</text>  </view>
                <view class="item">开始时间：<text style="color: #ccc;">{{detail.leaveStartTime}}</text>  </view>
                <view class="item">结束时间：<text style="color: #ccc;">{{detail.leaveEndTime}}</text>  </view>
                <view class="item">请假时长：<text style="color: #ccc;">{{detail.leaveDays}}天</text>  </view>
                <view class="item">请假原因：<text style="color: #ccc;">{{detail.leaveExplain}}</text>  </view>
                <!-- <view class="item">审批人：<text style="color: #ccc;">{{detail.copySendId}}</text>  </view> -->

      </view>
  </view>
</template>

<script>
  import {
    leaveApply,
    teacherLeaveApply,
    getLeaveReason,
    getTeacherLeaveReason,
    studentSubmitList,
    getUserInfo,
    attendanceList,
    teacherAllList,
    getTeacherAttendanceList
  } from "@/api/user.js";
     import {mapState,mapGetters} from "vuex"
  export default {
    data() {
      return {
        leaveReason:[],
        detail:{}
      }
    },
    computed:{
      ...mapState(["userInfo","userType","userId"]),
    },
    onLoad(options) {
        console.log("options",JSON.parse(options.detail))
        this.detail=JSON.parse(options.detail)
        this.getType()
    },
    methods:{
      getType() {

        if(this.userType == 3){
          getTeacherLeaveReason().then(res=>{
            this.leaveReason = res.data;
            this.typeColumns = [];
            console.log(res.data.map(v => v.leaveReason))
            this.typeColumns.push(res.data.map(v => v.leaveReason))
          })

        }else if(this.userType == 4){
          getLeaveReason().then(res => {
            this.leaveReason = res.data;
            this.typeColumns = [];
            console.log(res.data.map(v => v.leaveReason))
            this.typeColumns.push(res.data.map(v => v.leaveReason))
          })
        }

      },
        findVal(id){
          // console.log(this.leaveReason.filter(e=>e.id==id))
          return this.leaveReason.filter(e=>e.id==id)[0] && this.leaveReason.filter(e=>e.id==id)[0].leaveReason;
        },
    }
  }
</script>
<style>
  page{
 background-color: #F8FAFB;
  }
</style>
<style scoped lang="scss">
  .main{
    width: 100%;
    height: 100%;
    padding-top: 20rpx;

  }
  .container_warp{
      margin:0 20rpx 20rpx 20rpx;
      background-color: #ffffff;
      height: 100%;
      padding: 10rpx;
      .item{
        margin: 20rpx 0;
      }
  }
</style>
